<template>
	<view class="app">
		<image src="https://gnzxwylz.xlygrcw.com/upload/GNZX/motion/2.png" mode="widthFix"></image>
		<view class="">
			<view class="item">
				<text>提案者姓名</text>
				<view class=""><u-input v-model="fromData.applyName" type="text" input-align="right" :clearable="false" placeholder="请输入信息" /></view>
			</view>
			<view class="item">
				<text>提案分类</text>
				<view class="" @tap="show = true">
					<text v-if="fromData.typeName.length > 0">{{ fromData.typeName }}</text>
					<text v-else style="color: #c0c4cc;font-size: 24upx;">请选择</text>
				</view>
			</view>
			<view class="item">
				<text>单位通讯地址</text>
				<view class=""><u-input v-model="fromData.address" type="text" input-align="right" :clearable="false" placeholder="请输入信息" /></view>
			</view>
			<view class="item">
				<text>邮编</text>
				<view class=""><u-input v-model="fromData.mail" type="text" input-align="right" :clearable="false" placeholder="请输入信息" /></view>
			</view>
			<view class="item">
				<text>电话(手机)</text>
				<view class=""><u-input v-model="fromData.phone" type="text" input-align="right" :clearable="false" placeholder="请输入信息" /></view>
			</view>
			<view class="item">
				<text>联名</text>
				<view class="">
					<u-radio-group v-model="value" style="display: flex;justify-content: flex-end;">
						<u-radio active-color="red" @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item" v-if="fromData.isJointlySigned == 1">
				<text>联名委员</text>
				<view class=""><u-input v-model="fromData.jointlySigned" type="text" input-align="right" :clearable="false" placeholder="请输入信息(多个以 , 分隔)" /></view>
			</view>
			<view class="item">
				<text>建议承办单位</text>
				<view class=""><u-input v-model="fromData.departmentFrontName" type="text" input-align="right" :clearable="false" placeholder="请输入信息" /></view>
			</view>
			<view class="item" style="display: block;border-bottom: 0;">
				<text>案题</text>
				<view class="" style="padding: 20upx;background: #F9F9F9;margin-top: 20upx;">
					<u-input v-model="fromData.title" type="textarea" input-align="left" :clearable="false" placeholder="请输入信息" />
				</view>
			</view>
			<view class="item" style="display: block;border-bottom: 0;">
				<text>正文</text>
				<view class="" style="padding: 20upx;background: #F9F9F9;margin-top: 20upx;">
					<u-input v-model="fromData.content" type="textarea" maxlength='4000' input-align="left" :clearable="false" placeholder="请输入信息" />
				</view>
			</view>
			<view class="item" style="display: block;border-bottom: 0;">
				<text>图片</text>
				<view class="" style="padding: 20upx;margin-top: 20upx;">
					<u-upload
						width="190"
						:auto-upload="true"
						height="190"
						@on-success="onSucessImg"
						@on-remove="onRemoveImg"
						:show-progress="false"
						action="https://gnzxwylz.xlygrcw.com/file/upload"
					></u-upload>
				</view>
			</view>
		</view>
		<view class="btn"><text @tap="onSumbit">提交</text></view>
		<u-select v-model="show" value-name="id" mode="mutil-column-auto" :list="typeList" @confirm="onConfirm"></u-select>
		<!-- <u-picker mode="multiSelector" v-model="show" :range="typeList" @change='onChange' @columnchange='onColumnchange' range-key="label" @confirm="onConfirm"></u-picker> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			fromData: {
				imgUrl: [],
			},
			show: false,
			typeList: [],
			list: [
				{
					name: '不联名',
					id: 0
				},
				{
					name: '联名',
					id: 1
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: ''
		};
	},
	onShow() {
		const param = {
			parentId: '',
			title: ''
		};
		var _this = this;
		this.request({
			url: this.interfaces.getMintionTypeList,
			data: param,
			method: 'POST',
			success: res => {
				console.log(res);
				_this.$nextTick(function() {
					_this.typeList = res;
					// _this.typeList[1] = res[0].children
					console.log(_this.typeList);
				});
			},
			fail(e) {
				uni.showToast({
					title: '获取失败'
				});
			}
		});
	},
	methods: {
		onConfirm(e) {
			console.log(e);
			this.fromData.typeName = e[0].label + '/' + e[1].label;
			this.fromData.typeId = e[1].value;
			console.log(this.fromData);
		},
		radioChange(e) {
			this.fromData.isJointlySigned = e == '不联名' ? 0 : 1;
			this.value = e;
			console.log(e);
		},
		onSumbit() {
			console.log(this.fromData);
			var _this = this;
			if (this.result.isMotion(this.fromData)) {
				const user = uni.getStorageSync('gnzx_users');
				_this.fromData.status = 0;
				_this.fromData.applyId = user.id;
				_this.fromData.imgUrl = _this.fromData.imgUrl.join(',');
				this.request({
					url: this.interfaces.getMintionSave,
					data: _this.fromData,
					method: 'POST',
					success: res => {
						console.log(res);
						uni.showToast({
							title: '提交提案成功'
						});
						uni.navigateTo({
							url:'../wodetian/wodetian'
						})
					},
					fail(e) {
						uni.showToast({
							title: '获取失败'
						});
					}
				});
			}
		},
		onSucessImg(res) {
			this.fromData.imgUrl.push(res.data.url);
		},
		onRemoveImg(ind) {
			this.fromData.imgUrl.splice(ind, 1);
		}
	}
};
</script>

<style lang="scss">
@import './motion.scss';
</style>
